<template>
  <!--发帖子界面-->
  <div class="postBBS">
    <!--    帖子标题 和分类-->
    <div class="title">
      <van-cell-group>
        <van-field
            v-model="value1"
            left-icon="smile-o"
            placeholder="请输入吧题"
        />
      </van-cell-group>
      <div class="down-list">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value" :options="option"/>
        </van-dropdown-menu>
      </div>
    </div>
    <!--帖子内容-->
    <div class="bbs-details">
      <van-field
          v-model="message"
          autofocus
          autosize
          label=""
          placeholder="这一刻的想法"
          rows="1"
          type="textarea"
      />

    </div>
    <!--    帖子图片-->
    <div class="post-img">
      <van-uploader v-model="fileList" :max-count="1" ResultType="file" multiple/>
      <!--      <input ref="getImg" type="file" @change="addImg">-->
    </div>
    <!--    提交按钮/跳转按钮-->
    <div class="submit">
      <van-button v-show="flag" type="default" @click="btn">发表</van-button>
      <van-button v-show="!flag" loading loading-text="发表中.." type="default"/>
    </div>
  </div>
</template>

<script>
// postComment,
import {getCategory, creatNode,  getMyJoin, uploadImg} from '../api/api'
import {Notify} from "vant";

export default {
  name: "Post",
  data() {
    return {
      //图片文件
      fileList: [
        // {url: 'https://img.yzcdn.cn/vant/leaf.jpg'},
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // {url: 'https://cloud-image', isImage: true},
      ],
      //贴吧标题
      value1: '',
      //类别
      value: 0,
      //贴吧内容
      message: '',
      flag: true,
      //下拉列表类别分类
      option: [],
      //我参与的
      myJoin: [],
      //  获取postId
      bbsPostId: [],
      // 获取图片
      imgList: [],
    };
  },
  methods: {
    //修改信息按钮方法
    btn() {
      if (this.value1 == '' || this.message == '' || this.fileList == '') {
        Notify({type: 'danger', message: '信息填写不完整！'});
      } else {
        // console.log(this.fileList[0].content)

        //上傳圖片
        uploadImg(this.fileList[0].file).then(res => {
          // console.log(res)
          this.imgList = res.url;
          //创建帖子
          //分类id ,标题,内容,地址
          creatNode(this.value + 1, this.value1, this.message, this.imgList).then(() => {
            Notify({type: 'success', message: '发表成功'});

          })

        })

        //我参与的帖子
        getMyJoin().then(res => {
          // console.log(res)
          this.myJoin = res.rows
          // console.log(this.myJoin.slice(this.myJoin.length - 1))
          this.bbsPostId = this.myJoin.slice(this.myJoin.length - 1)
          // console.log(this.bbsPostId[0])
        })

        // setTimeout(() => {
        //   //发表帖子
        //   //帖子id和内容 需要帖子id 从我参与的里面找帖子id
        //   postComment(this.bbsPostId[0].postsId, this.message).then()
        // }, 800)


        //发帖后跳转和切换
        this.flag = false;
        setTimeout(() => {
          this.$router.push({path: '/index'})
        }, 1000)
      }
    }


  },
  created() {
    //获取到下拉列表的类别
    getCategory().then(res => {
      res.rows.filter(item1 => {
        this.option.push({text: item1.name, value: (item1.categoryId - 1)})
      })
    })
  }
}
</script>

<style lang="less" scoped>
.postBBS {
  padding: 10px;

}

.post-img {
  width: 30%;
  text-align: center;

  /deep/ .van-uploader__upload-icon {
    color: #dcdee0;
    font-size: 45px;
    //background-color: white;
  }
}

.title {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}

.bbs-details {
  margin: 20px 0;
  width: 100%;
  height: 98px;
}

.submit {

  float: right;
}


</style>